<template>
	<div class="operating_data">		
		<div class="content">
			<div class="data_statistics">
				<div class="data_statistics_title" @click="goAct">数据统计</div>
				<div class="data_statistics_icons">
					<p @click="goDetail(5)">
						<img src="../../assets/images/statistics/1.png" alt="" />
						<span>营业统计</span>
					</p>
					<img src="../../assets/images/statistics/bang.jpg" alt="" />
					<p @click="goDetail(6)">
						<img src="../../assets/images/statistics/2.png" alt="" />
						<span>顾客分析</span>
					</p>
					<img src="../../assets/images/statistics/bang.jpg" alt="" />
					<p @click="goDetail(7)">
						<img src="../../assets/images/statistics/3.png" alt="" />
						<span>客流分析</span>
					</p>
					<img src="../../assets/images/statistics/bang.jpg" alt="" />
					<p @click="goDetail(8)">
						<img src="../../assets/images/statistics/4.png" alt="" />
						<span>商品分析</span>
					</p>
					<img src="../../assets/images/statistics/bang.jpg" alt="" />
					<p @click="goDetail(9)">
						<img src="../../assets/images/statistics/5.png" alt="" />
						<span>商家体验</span>
					</p>
				</div>
			</div>
			<div class="manage_report">
				<div class="manage_report_title" @click="goGroup">经营报告</div>
				<div class="manage_report_infos">
					<div class="manage_report_infos_nav">
						<tab>
							<tab-item selected @on-item-click="onItemClick">昨日&nbsp;经营日报</tab-item>
							<tab-item @on-item-click="onItemClick">近7日&nbsp;经营数据</tab-item>
						</tab>
					</div>
					<div class="manage_report_info_1" v-if="selectIndex === 0">
						<div class="statistics_time">统计时间:{{ lastDay }}</div>
						<div class="passenger_flow">
							<div class="common_title" @click="goDetail(1)">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>昨日&nbsp;客流概况</span>
								</div>
								<div class="right">
									<span>详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</div>
							</div>
							<div class="passenger_flow_detail">
								<div class="exposure_sum">
									<span>曝光人数</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
								<div class="enter_shop exposure_sum">
									<span>入店转化率</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
								<div class="place_order exposure_sum">
									<span>下单转化率</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
							</div>
						</div>
						<div class="place_order_customer">
							<div class="common_title" @click="goDetail(2)">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>昨日&nbsp;下单顾客概况</span>
								</div>
								<div class="right">
									<span>详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</div>
							</div>
							<div class="place_order_customer_detail">
								<div class="old_customer">
									<div>
										<p>
											<img src="../../assets/images/statistics/old.jpg" alt="" />
											<span>老客</span>
										</p>
										<p><span>0</span>人&nbsp;较前日--&nbsp;持平</p>
									</div>
								</div>
								<div class="old_customer" style="padding-bottom: .4rem;">
									<div>
										<p>
											<img src="../../assets/images/statistics/new.jpg" alt="" />
											<span>新客</span>
										</p>
										<p><span>0</span>人&nbsp;较前日--&nbsp;持平</p>
									</div>
								</div>
							</div>
						</div>
						<div class="yesterday_statistics">
							<div class="common_title" @click="goDetail(4)">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>昨日&nbsp;营业统计</span>
								</div>
								<div class="right">
									<span>详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</div>
							</div>
							<div class="yesterday_statistics_detail">
								<div class="valid_orders">
									<div class="valid_order_left">
										<p>有效订单</p>
										<p><span>0</span>单</p>
										<p>较前日&nbsp;--持平</p>
									</div>
									<div class="valid_order_right">
										<p>营业额<span>新</span></p>
										<p>￥<span>0</span></p>
										<p>较前日&nbsp;--持平</p>
									</div>
								</div>
								<div class="invalid_orders">
									<p><span>无效订单</span>&nbsp;{{ invalid_sum }}单</p>
									<p v-if="invalid_sum === 0">请继续保持</p>
								</div>
							</div>
						</div>
						<div class="physical_examination">
							<div class="common_title">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>昨日&nbsp;体检结果</span>
								</div>
							</div>
							<div class="check_infos" @click="goExperience">
								<img src="../../assets/images/statistics/noCheck.jpg" alt="" />
								<div>
									<p>暂无体检结果</p>
									<p>店铺最近7天没有成交记录</p>
								</div>
								<p>
									<span>查看详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</p>
							</div>
						</div>
					</div>
					<div class="manage_report_info_2" v-if="selectIndex === 1">
						<div class="statistics_time" style="background: #efefef;">统计时间:{{ lastDay }}~{{ lastSevenDay }}</div>
						<div class="passenger_flow">
							<div class="common_title" @click="goDetail(1)">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>近7日&nbsp;客流概况</span>
								</div>
								<div class="right">
									<span>详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</div>
							</div>
							<div class="passenger_flow_detail">
								<div class="exposure_sum">
									<span>曝光人数</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
								<div class="enter_shop exposure_sum">
									<span>入店转化率</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
								<div class="place_order exposure_sum">
									<span>下单转化率</span>
									<p>
										<img src="../../assets/images/statistics/6.png" alt="" />
										<span>较差</span>
									</p>
								</div>
							</div>
						</div>
						<div class="common_title" @click="goDetail(4)" style="border-top: .2rem solid #efefef;">
							<div class="left">
								<img src="../../assets/images/statistics/blue2.jpg" alt="" />
								<span>近7日&nbsp;有效订单</span>
							</div>
							<div class="right">
								<span>详情</span>
								<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
							</div>
						</div>
						<div class="valid_order_chart">
							<x-chart :id="id" :option="option"></x-chart>
						</div>
						<div class="max_min_order">
							<div class="max_order">
								<p>每日订单最高(04.19)</p>
								<p><span>0</span>单</p>
							</div>
							<div class="max_order" style="border-right: none;">
								<p>每日订单最低(04.19)</p>
								<p><span>0</span>单</p>
							</div>
						</div>
						<div class="goods_analysis">
							<div class="common_title" @click="goDetail(3)">
								<div class="left">
									<img src="../../assets/images/statistics/blue2.jpg" alt="" />
									<span>近7日&nbsp;商品分析</span>
								</div>
								<div class="right">
									<span>详情</span>
									<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
								</div>
							</div>
							<div class="goods_analysis_infos">
								<div class="goods_analysis_info_title">
									<p>菜品</p>
									<p>销量(份)</p>
									<p>售价(元)</p>
								</div>
								<div class="goods_analysis_info">
									<div class="no_analysis_info">
										<img src="../../assets/images/statistics/none.jpg" alt="" />
										<p>暂无数据，请稍后再看</p>
									</div>
									<div class="have_analysis_info"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	import XChart from '@/page/statistics/validOrderChart';
	import options from '@/assets/js/valid_order_option';
	export default {
		name: 'operating_data',
		data() {
			let option = options.bar;
			return {
				id: 'test',
				option: option,
				selectIndex: 0, //0-昨日 经营日报  1-近7日 经营数据
				invalid_sum: 0, //无效单数
				lastDay: '', //昨日
				lastSevenDay: '', //前七日
			}
		},
		components: {
			XChart,
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {					
			let d1 = new Date();
			d1.setTime(d1.getTime() - 24 * 60 * 60 * 1000);
			let d7 = new Date();
			d7.setTime(d7.getTime() - 24 * 7 * 60 * 60 * 1000);
			this.lastDay = this.formats(d1);
			this.lastSevenDay = this.formats(d7);
		},
		methods: {
			goAct() {
				
			},
			goGroup(){
				
			},
			//时间切换
			onItemClick(value) {
				this.selectIndex = value;
			},
			//详情
			goDetail(id) {
				if(id === 1) {
					this.$router.push('/passengerFlow/' + this.selectIndex);
				} else if(id === 2) {
					this.$router.push('/customerAnalysis/' + this.selectIndex);
				} else if(id === 3) {
					this.$router.push('/goods/0');
				} else if(id === 4) {
					this.$router.push('/business/' + this.selectIndex);
				} else if(id === 5) {
					this.$router.push('/business/1');
				} else if(id === 6) {
					this.$router.push('/customerAnalysis/1');
				} else if(id === 7) {
					this.$router.push('/passengerFlow/1');
				} else if(id === 8) {
					this.$router.push('/goods/0');
				} else if(id === 9) {
					this.$router.push('/experience/1');
				}
			},
			//商家体验详情
			goExperience() {
				this.$router.push('/experience/0');
			},
			//格式化
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.operating_data {
		.content {
			.data_statistics {
				.data_statistics_title {
					font-size: .28rem;
					color: #626262;
					padding: .18rem .25rem;
					text-align: left;
				}
				.data_statistics_icons {
					height: 1.68rem;
					background: #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;
					p {
						display: flex;
						flex-flow: column;
						align-items: center;
						font-size: .24rem;
						color: #2b2b2b;
						img {
							width: .54rem;
							height: .54rem;
							margin-bottom: .2rem;
						}
					}
					>img {
						width: .04rem;
						height: .62rem;
					}
				}
			}
			.manage_report {
				.manage_report_title {
					font-size: .28rem;
					color: #626262;
					padding: .18rem .25rem;
					text-align: left;
				}
				.manage_report_infos {
					.common_title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: .28rem .34rem .28rem 0;
						border-bottom: 1px solid #f3f3f3;
						.left {
							display: flex;
							align-items: center;
							span {
								font-size: .32rem;
								color: #303030;
								font-weight: 700;
								margin-left: .28rem;
							}
							img {
								width: .08rem;
								height: .35rem;
							}
						}
						.right {
							display: flex;
							align-items: center;
							span {
								font-size: .3rem;
								color: #ababab;
								margin-right: .08rem;
							}
							img {
								width: .15rem;
								height: .15rem;
							}
						}
					}
					.statistics_time {
						font-size: .28rem;
						color: #626262;
						padding: .18rem .25rem;
						text-align: left;
					}
					.passenger_flow {
						background: #fff;
						.passenger_flow_detail {
							display: flex;
							justify-content: space-around;
							align-items: center;
							padding: .3rem 0;
							.exposure_sum {
								>span {
									font-size: .28rem;
									color: #a1a1a1;
								}
								>p {
									font-size: .28rem;
									color: #f1283a;
									display: flex;
									justify-content: center;
									align-items: center;
									margin-top: .2rem;
									img {
										width: .4rem;
										height: .4rem;
										margin-right: .08rem;
									}
								}
							}
						}
					}
					.manage_report_info_1 {
						.place_order_customer {
							background: #fff;
							border-top: .2rem solid #efefef;
							.place_order_customer_detail {
								.old_customer {
									>div {
										text-align: left;
										padding: .26rem 0 0 .3rem;
										p:nth-of-type(1) {
											img {
												width: .16rem;
												height: .16rem;
												margin-right: .1rem;
											}
											span {
												font-size: .28rem;
												color: #aeaeae;
											}
										}
										p:nth-of-type(2) {
											font-size: .28rem;
											color: #1c1c1c;
											padding: .1rem 0 0 .38rem;
											span {
												font-size: .38rem;
												font-weight: 700;
											}
										}
									}
								}
							}
						}
						.yesterday_statistics {
							background: #fff;
							border-top: .2rem solid #efefef;
							.yesterday_statistics_detail {
								.valid_orders {
									display: flex;
									padding: .22rem 0 .22rem .3rem;
									text-align: left;
									border-bottom: 1px solid #f3f3f3;
									.valid_order_left {
										width: 3.1rem;
										height: 1.25rem;
										border-right: 2px dashed #efefef;
										p:nth-of-type(1) {
											font-size: .3rem;
											color: #a4a4a4;
										}
										p:nth-of-type(2) {
											font-size: .26rem;
											color: #282828;
											font-weight: 700;
											margin: .16rem 0;
											span {
												font-size: .34rem;
											}
										}
										p:nth-of-type(3) {
											font-size: .3rem;
											color: #717171;
										}
									}
									.valid_order_right {
										margin-left: .26rem;
										p:nth-of-type(1) {
											font-size: .3rem;
											color: #a4a4a4;
											span {
												border: 1px solid #e26a73;
												color: #e26a73;
												margin-left: .04rem;
											}
										}
										p:nth-of-type(2) {
											font-size: .26rem;
											color: #282828;
											font-weight: 700;
											margin: .16rem 0;
											span {
												font-size: .34rem;
											}
										}
										p:nth-of-type(3) {
											font-size: .3rem;
											color: #717171;
										}
									}
								}
								.invalid_orders {
									text-align: left;
									padding: .28rem .32rem;
									p:nth-of-type(1) {
										font-size: .3rem;
										color: #282828;
										span {
											color: #a4a4a4;
										}
									}
									p:nth-of-type(2) {
										font-size: .3rem;
										color: #a4a4a4;
									}
								}
							}
						}
						.physical_examination {
							background: #fff;
							border-top: .2rem solid #efefef;
							border-bottom: .2rem solid #efefef;
							.check_infos {
								display: flex;
								justify-content: space-around;
								align-items: center;
								padding: .26rem 0;
								>img {
									width: 1.28rem;
									height: 1.28rem;
								}
								>div {
									p:nth-of-type(1) {
										font-size: .3rem;
										color: #212121;
									}
									p:nth-of-type(2) {
										font-size: .3rem;
										color: #a8a8a8;
									}
								}
								p {
									display: flex;
									align-items: center;
									font-size: .3rem;
									color: #ababab;
									img {
										width: .15rem;
										height: .15rem;
										margin-left: .08rem;
									}
								}
							}
						}
					}
					.manage_report_info_2 {
						background: #fff;
						.valid_order_chart {
							border-bottom: 1px solid #efefef;
						}
						.max_min_order {
							display: flex;
							align-items: center;
							padding: .24rem 0;
							border-bottom: .2rem solid #efefef;
							.max_order {
								text-align: left;
								border-right: 2px dashed #efefef;
								p {
									padding: 0 .28rem;
								}
								p:nth-of-type(1) {
									height: .6rem;
									font-size: .3rem;
									color: #9e9e9e;
								}
								p:nth-of-type(2) {
									font-size: .26rem;
									color: #272727;
									span {
										font-size: .38rem;
										font-weight: 700;
									}
								}
							}
						}
						.goods_analysis {
							.goods_analysis_infos {
								.goods_analysis_info_title {
									display: flex;
									justify-content: space-around;
									align-items: center;
									padding: .26rem 0;
									background: #f8f8f8;
									p {
										font-size: .36rem;
										color: #5e5e5e;
									}
									p:nth-of-type(2) {
										margin: 0 -.2rem 0 1.4rem;
									}
								}
								.goods_analysis_info {
									.no_analysis_info {
										padding: .54rem 0;
										img {
											width: 1.69rem;
											height: 1.69rem;
										}
										p {
											font-size: .3rem;
											color: #7d7d7d;
										}
									}
									.have_analysis_info {
										padding: .54rem 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>